<template>
	<view class="spread flex flex-col" :class="{'box-spread': showFlag}">
		<text class="line-text" v-for="e,i in lines" :key="i">{{e}}</text>
		<view class="float-box flex" style="gap: 20rpx;">
			<view class="flex flex-col justify-center">
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 2 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[1].tarot.front" mode="widthFix" v-if="cardList[1].dir == 0"></image>
						<image :src="cardList[1].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>阳风</text>
							<text>东</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">伤</text>
				</view>
			</view>
			<view class="flex flex-col justify-center" style="gap: 20rpx;">
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 6 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[5].tarot.front" mode="widthFix" v-if="cardList[5].dir == 0"></image>
						<image :src="cardList[5].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>凤阳土</text>
							<text>东南</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">杜</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 9 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[8].tarot.front" mode="widthFix" v-if="cardList[8].dir == 0"></image>
						<image :src="cardList[8].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>水阴土</text>
							<text>东北</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">生</text>
				</view>
			</view>
			<view class="flex flex-col justify-center" style="gap: 20rpx;">
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 3 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[2].tarot.front" mode="widthFix" v-if="cardList[2].dir == 0"></image>
						<image :src="cardList[2].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>阳火</text>
							<text>南</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">景</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 1 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[0].tarot.front" mode="widthFix" v-if="cardList[0].dir == 0"></image>
						<image :src="cardList[0].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<!-- <text class="spread-label flex justify-center">生</text> -->
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>切牌</text>
							<!-- <text>东北</text> -->
						</text>
					</template>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 5 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[4].tarot.front" mode="widthFix" v-if="cardList[4].dir == 0"></image>
						<image :src="cardList[4].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>阳水</text>
							<text>北</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">休</text>
				</view>
			</view>
			<view class="flex flex-col justify-center" style="gap: 20rpx;">
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 7 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[6].tarot.front" mode="widthFix" v-if="cardList[6].dir == 0"></image>
						<image :src="cardList[6].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>火阳土</text>
							<text>西南</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">死</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 8 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[7].tarot.front" mode="widthFix" v-if="cardList[7].dir == 0"></image>
						<image :src="cardList[7].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>金阴土</text>
							<text>西北</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">开</text>
				</view>
			</view>
			<view class="flex flex-col justify-center" style="gap: 30rpx;">
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 4 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[3].tarot.front" mode="widthFix" v-if="cardList[3].dir == 0"></image>
						<image :src="cardList[3].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>阳金</text>
							<text>西</text>
						</text>
					</template>
					<text class="spread-label flex justify-center">惊</text>
				</view>
			</view>
			<view class="flex flex-col justify-between">
				<text class="content-label">阳</text>
				<text class="content-label">阴</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const lines = ref([
		'白羊座： 权杖12345 愚者 塔牌',
		'金牛座： 星币12345 皇后 世界',
		'双子座： 宝剑12345 魔法师 恋人',
		'巨蟹座： 圣杯12345 月亮 命运',
		'狮子座： 权杖678910 皇帝 力量',
		'处女座： 星币678910 女祭司 隐士',
		'天秤座： 天秤678910 正义',
		'天蝎座： 圣杯678910 死神 审判',
		'射手座： 权杖侍从 骑士 王后 国王 战车 太阳',
		'摩羯座： 星币侍从 骑士 王后 国王 恶魔 节制',
		'水瓶座： 宝剑侍从 骑士 王后 国王 星星 教皇',
		'双鱼座： 圣杯侍从 骑士 王后 国王 吊人',
		'例如：全牌阵中合适的牌出现在生门上一张死神牌，提出问题的人是87年炉中火的男性，便可以建议在未来三个月内可关注一下与医学相关的祖籍东北91年出生(卯未和)的天蝎座异性，且两人可能从前就认识或在医院附近新结识的异性(死神牌)案例可参考李云龙在医院与护士结婚。'
	])
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 50rpx 10rpx 20rpx;
		gap: 20rpx;
	}

	.line-text {
		font-size: 18rpx;
	}

	.card-box {
		position: absolute;
		top: 0;
		right: 0;
	}

	.float-box {
		position: absolute;
		top: 50rpx;
		right: 20rpx;
		zoom: 0.68;
	}

	.spread-item {
		position: relative;
	}

	.content-label {
		font-size: 26rpx;
		color: orange;
	}
</style>